<template>
  <div class="aroductAssociation-box">
    <el-form>
      <el-form-item label="关联专题:">
        <el-transfer
          v-model="value"
          :titles="['待选择', '已选择']"
          filterable
          filter-placeholder="请输入专题名称"
          :props="{ key: 'id', label: 'name' }"
          :data="data"
          @change="add"
        />
      </el-form-item>
      <el-form-item label="关联优选:">
        <el-transfer
          v-model="value1"
          :titles="['待选择', '已选择']"
          filterable
          filter-placeholder="请输入优选名称"
          :props="{
            key: 'id',
            label: 'title',
          }"
          :data="data1"
          @change="add1"
        />
      </el-form-item>
      <el-form-item class="btn">
        <el-button @click="active = 2"> 上一步，填写商品属性 </el-button>

        <el-button type="primary" @click="submitForm">
          完成,提交商品
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ElMessageBox, FormInstance } from "element-plus";
import { inject, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import {
  addProducCreatetApi,
  prefrenceAreaListAllApi,
  subjectListAllApi,
} from "../api/api";

const active = inject<any>("active");
const all = inject<any>("all");
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const list = reactive<any>({
  prefrenceAreaProductRelationList: [],
  subjectProductRelationList: [],
});

prefrenceAreaListAllApi().then((res) => {
  if (res.code === 200) {
    data.value = res.data;
  }
});
const data = ref<IPrefrenceAreaListAll[]>([]);
const value = ref<number[]>([]);
const add = (value: IPrefrenceAreaListAll[]) => {
  list.prefrenceAreaProductRelationList = value.map((item: { id: number }) => ({
    prefrenceAreaId: item,
  }));
};

subjectListAllApi().then((res) => {
  if (res.code === 200) {
    data1.value = res.data;
  }
});
const data1 = ref<ISubjectListAll[]>([]);
const value1 = ref<number[]>([]);
const add1 = (value: ISubjectListAll[]) => {
  list.subjectProductRelationList = value.map((item: { id: number }) => ({
    subjectId: item,
  }));
};

const submitForm = () => {
  Object.assign(all, list);
  ElMessageBox.confirm("是否要提交该产品?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      addProducCreatetApi(all).then((res) => {
        if (res.code === 200) {
          router.go(0);
        }
      });
    })
    .catch(() => {});
};
</script>

<style scoped lang="less">
.aroductAssociation-box {
  padding: 20px;
  // margin-right: 80px;
  .btn {
    :deep(.el-form-item__content) {
      justify-content: center;
    }
  }
}
</style>
